<template>
	<view class="container">
		<view class="header">
			<text class="title">沙扒湾景点</text>
			<view class="search-box">
				<image src="/static/search.png" class="search-icon"></image>
				<input type="text" placeholder="搜索景点" confirm-type="search" v-model="searchText" @confirm="searchAttractions" />
			</view>
		</view>
		
		<!-- 筛选分类 -->
		<view class="category-filter">
			<view class="filter-item" :class="{'active': currentCategory === 'all'}" @click="filterByCategory('all')">
				<text>全部景点</text>
			</view>
			<view class="filter-item" :class="{'active': currentCategory === 'entertainment'}" @click="filterByCategory('entertainment')">
				<text>娱乐设施</text>
			</view>
			<view class="filter-item" :class="{'active': currentCategory === 'beach'}" @click="filterByCategory('beach')">
				<text>海滩</text>
			</view>
			<view class="filter-item" :class="{'active': currentCategory === 'museum'}" @click="filterByCategory('museum')">
				<text>博物馆</text>
			</view>
			<view class="filter-item" :class="{'active': currentCategory === 'indoor'}" @click="filterByCategory('indoor')">
				<text>室内景点</text>
			</view>
		</view>
		
		<view class="attractions-list">
			<view class="attraction-card" v-for="(item, index) in attractions" :key="index" @click="goToDetail(item.id)">
				<image class="attraction-image" :src="item.coverImage" mode="aspectFill"></image>
				<view class="attraction-info">
					<text class="attraction-name">{{item.name}}</text>
					<view class="attraction-tags">
						<text class="tag" v-for="(tag, tagIndex) in item.tags" :key="tagIndex">{{tag}}</text>
					</view>
					<view class="attraction-meta">
						<text class="rating">{{item.rating}} 分</text>
						<text class="visit-count">{{item.visitCount}}人去过</text>
					</view>
				</view>
			</view>
			
			<view class="empty-tips" v-if="attractions.length === 0 && !isLoading">
				暂无{{getCategoryName(currentCategory)}}数据
			</view>
			
			<view class="loading" v-if="isLoading">
				<text>加载中...</text>
			</view>
		</view>
	</view>
</template>

<script>
	// 静态数据
	const staticAttractions = [
		{
			id: '1',
			name: '沙扒湾海滩',
			coverImage: '/static/图片.jpg',
			tags: ['海滩', '日落', '游泳'],
			rating: 4.8,
			visitCount: 5280,
			category: 'attraction',
			type: 'beach' // 类型为海滩
		},
		{
			id: '2',
			name: '闸坡海陵岛',
			coverImage: '/static/图片.jpg',
			tags: ['岛屿', '海鲜', '度假'],
			rating: 4.6,
			visitCount: 8320,
			category: 'attraction',
			type: 'beach' // 类型为海滩
		},
		{
			id: '3',
			name: '沙扒湾游乐园',
			coverImage: '/static/图片.jpg',
			tags: ['游乐', '亲子', '刺激'],
			rating: 4.5,
			visitCount: 3120,
			category: 'attraction',
			type: 'entertainment' // 类型为娱乐设施
		},
		{
			id: '4',
			name: '海上水上乐园',
			coverImage: '/static/图片.jpg',
			tags: ['水上', '娱乐', '清凉'],
			rating: 4.4,
			visitCount: 2870,
			category: 'attraction',
			type: 'entertainment' // 类型为娱乐设施
		},
		{
			id: '5',
			name: '阳江海洋博物馆',
			coverImage: '/static/图片.jpg',
			tags: ['博物馆', '科普', '历史'],
			rating: 4.3,
			visitCount: 1920,
			category: 'attraction',
			type: 'museum' // 类型为博物馆
		},
		{
			id: '6',
			name: '渔文化展览馆',
			coverImage: '/static/图片.jpg',
			tags: ['展览', '文化', '历史'],
			rating: 4.2,
			visitCount: 1580,
			category: 'attraction',
			type: 'museum' // 类型为博物馆
		},
		{
			id: '7',
			name: '沙扒湾休闲中心',
			coverImage: '/static/图片.jpg',
			tags: ['室内', '休闲', '体验'],
			rating: 4.1,
			visitCount: 1350,
			category: 'attraction',
			type: 'indoor' // 类型为室内景点
		},
		{
			id: '8',
			name: '渔家风情体验馆',
			coverImage: '/static/图片.jpg',
			tags: ['室内', '体验', '文化'],
			rating: 4.0,
			visitCount: 1120,
			category: 'attraction',
			type: 'indoor' // 类型为室内景点
		}
	];
	
	// 合并所有数据
	const allData = [...staticAttractions];
	
	export default {
		data() {
			return {
				searchText: '',
				attractions: [],
				isLoading: false,
				allAttractions: allData,
				currentCategory: 'all'
			}
		},
		onLoad(options) {
			// 加载所有景点数据
			this.attractions = JSON.parse(JSON.stringify(staticAttractions));
			
			// 如果有传入分类参数，则按分类过滤
			if (options.category) {
				this.currentCategory = options.category;
				this.filterByCategory(options.category);
			}
		},
		methods: {
			// 根据分类筛选
			filterByCategory(category) {
				this.currentCategory = category;
				this.isLoading = true;
				
				// 模拟加载延迟
				setTimeout(() => {
					// 根据分类筛选数据
					switch(category) {
						case 'all':
							this.attractions = JSON.parse(JSON.stringify(staticAttractions));
							break;
						case 'entertainment':
							this.attractions = JSON.parse(JSON.stringify(
								staticAttractions.filter(item => item.type === 'entertainment')
							));
							break;
						case 'beach':
							this.attractions = JSON.parse(JSON.stringify(
								staticAttractions.filter(item => item.type === 'beach')
							));
							break;
						case 'museum':
							this.attractions = JSON.parse(JSON.stringify(
								staticAttractions.filter(item => item.type === 'museum')
							));
							break;
						case 'indoor':
							this.attractions = JSON.parse(JSON.stringify(
								staticAttractions.filter(item => item.type === 'indoor')
							));
							break;
						default:
							this.attractions = JSON.parse(JSON.stringify(staticAttractions));
					}
					
					this.isLoading = false;
				}, 300);
			},
			
			// 搜索景点
			searchAttractions() {
				if (!this.searchText.trim()) {
					this.filterByCategory(this.currentCategory);
					return;
				}
				
				const keyword = this.searchText.toLowerCase();
				this.isLoading = true;
				
				// 确定搜索范围
				let searchSource;
				if (this.currentCategory === 'all') {
					searchSource = staticAttractions;
				} else {
					searchSource = staticAttractions.filter(item => item.type === this.currentCategory);
				}
				
				// 本地过滤
				setTimeout(() => {
					this.attractions = searchSource.filter(item => 
						item.name.toLowerCase().includes(keyword) || 
						(item.tags && item.tags.some(tag => tag.toLowerCase().includes(keyword)))
					);
					
					this.isLoading = false;
					
					if (this.attractions.length === 0) {
						uni.showToast({
							title: '未找到相关数据',
							icon: 'none'
						});
					}
				}, 300);
			},
			
			// 跳转到详情页
			goToDetail(id) {
				uni.navigateTo({
					url: `/pages/attractions/detail?id=${id}`
				});
			},
			
			// 获取分类名称
			getCategoryName(category) {
				switch(category) {
					case 'all': return '景点';
					case 'entertainment': return '娱乐设施';
					case 'beach': return '海滩';
					case 'museum': return '博物馆';
					case 'indoor': return '室内景点';
					default: return '数据';
				}
			}
		},
		onShareAppMessage() {
			return {
				title: '沙扒湾景点推荐',
				path: '/pages/attractions/index'
			}
		},
		onPullDownRefresh() {
			if (this.searchText) {
				this.searchAttractions();
			} else {
				this.filterByCategory(this.currentCategory);
			}
			
			setTimeout(() => {
				uni.stopPullDownRefresh();
			}, 1000);
		}
	}
</script>

<style>
	.container {
		padding: 0 30rpx;
	}
	
	.header {
		padding: 30rpx 0;
	}
	
	.title {
		font-size: 36rpx;
		font-weight: bold;
		margin-bottom: 20rpx;
		display: block;
	}
	
	.search-box {
		display: flex;
		align-items: center;
		background-color: #f5f5f5;
		border-radius: 40rpx;
		padding: 15rpx 25rpx;
	}
	
	.search-icon {
		width: 40rpx;
		height: 40rpx;
		margin-right: 10rpx;
	}
	
	.search-box input {
		flex: 1;
		height: 40rpx;
		font-size: 28rpx;
	}
	
	/* 分类筛选样式 */
	.category-filter {
		display: flex;
		overflow-x: auto;
		background-color: #fff;
		padding: 20rpx 0;
		margin: 0 -30rpx 20rpx;
		padding: 20rpx 30rpx;
		white-space: nowrap;
	}
	
	.filter-item {
		padding: 12rpx 30rpx;
		font-size: 28rpx;
		color: #666;
		background-color: #f5f5f5;
		border-radius: 30rpx;
		margin-right: 20rpx;
		display: inline-block;
	}
	
	.filter-item.active {
		background-color: #1296db;
		color: #fff;
	}
	
	.attractions-list {
		padding-bottom: 30rpx;
	}
	
	.attraction-card {
		background-color: #ffffff;
		border-radius: 12rpx;
		margin-bottom: 30rpx;
		box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.1);
		overflow: hidden;
	}
	
	.attraction-image {
		width: 100%;
		height: 340rpx;
	}
	
	.attraction-info {
		padding: 20rpx;
	}
	
	.attraction-name {
		font-size: 32rpx;
		font-weight: bold;
		margin-bottom: 12rpx;
		display: block;
	}
	
	.attraction-tags {
		display: flex;
		flex-wrap: wrap;
		margin-bottom: 15rpx;
	}
	
	.tag {
		font-size: 24rpx;
		color: #1296db;
		background-color: #e6f4ff;
		padding: 6rpx 16rpx;
		border-radius: 20rpx;
		margin-right: 12rpx;
		margin-bottom: 8rpx;
	}
	
	.attraction-meta {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	
	.rating {
		color: #ff9500;
		font-size: 28rpx;
		font-weight: bold;
	}
	
	.visit-count {
		color: #888;
		font-size: 24rpx;
	}
	
	.empty-tips {
		text-align: center;
		color: #999;
		padding: 60rpx 0;
		font-size: 28rpx;
	}
	
	.loading {
		text-align: center;
		color: #999;
		padding: 30rpx 0;
		font-size: 28rpx;
	}
</style> 